<template>
  <div class="discovery">
    <div class="header">
      <a href="">
        <img src="../../../public/images/logo.svg" alt=""  class="header-logo">
      </a>
      <div class="header-right">
        <router-link
        to="/search"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <a href="" @click="navigate">
          <img
            src="../../../public/images/discovery/header-search.svg"
            alt="search"
            class="searchIcon"
          />
        </a>
        </router-link> 
        <router-link
        to="/shoppingCar"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <a href="" @click="navigate">
          <img        
            src="../../../public/images/discovery/header-cart.svg"
            alt="cart"
          />
        </a>
        </router-link>
        <router-link
        to="/classify"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      > 
        <a href="" @click="navigate">
          <img
            src="../../../public/images/discovery/header-category.svg"
            alt="category"
            class="searchIcon"
          />
        </a>
        </router-link> 
      </div>    
    </div>
    <van-tabs v-model="active" sticky color='#0058a3' @scroll="scroll" duration="0.5s" >
        <van-tab title="房间">
          <Room></Room>
        </van-tab>
        <van-tab title="BOSS直聘">
          <Activity></Activity>
        </van-tab>
        <van-tab title="服务">
          <Room></Room>
        </van-tab>
        <van-tab title="家具灵感">
          <Room></Room>
        </van-tab>
        <van-tab title="新品">
          <Room></Room>
        </van-tab>
        
    </van-tabs>

  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import Room from './Room'
import Activity from './Activity'


Vue.use(Tab);
Vue.use(Tabs);

export default {
  name: "",
  data() {
    return {
      active: 0,
    };
  },
  components: {
    Room,
    Activity
  },
  created() {},
  mounted() {},
  methods: {
    scroll(){
      isFixed:false
    }
  },
};
</script>
<style lang='stylus' scoped>
@import '../../assets/border.styl'
.discovery 
    position relative
    height 100%
    overflow hidden
    .header 
        height: 0.5rem;
        padding: 0 0.18rem;
        display: flex;
        align-items: center;
        justify-content space-between
        width 100%
        a
          width 0.6rem
          height 0.25rem
        .header-logo
            width 100%
            height 100%
        .header-right
            display flex
            width 1.23rem
            a 
              padding-left 0.25rem
 
</style>
<style lang="stylus">
@import '../../assets/border.styl'
.van-tabs
  height 6.17rem 
  overflow-y scroll
  
  .van-tabs__wrap
    height 0.57rem
    border_1px(2px 0 1px 0)
    transition top 0.5s
</style>
